<template>
  <a-modal :open="pageData.show" :width="1500"  @cancel="onClose(null)" :centered="true" :footer="null" :maskClosable="false">
    <template #title>{{ modalParam.modalTitle }}</template>
    <div class="page-list">
      <div class="panel-search" style="display: flex">
        <div class="search-item" style="width: 210px">
          <label>群组名称：</label>
          <a-input v-model:value="searchData.groupName" placeholder="请输入昵称" @pressEnter="onSearch" allow-clear/>
        </div>
        <div class="search-item" style="width: 260px">
          <label>时间：</label>
          <a-range-picker v-model:value="searchData.range" @change="handleChange"/>
        </div>
        <div class="search-item" style="width: 190px;margin-left:20px">
          <label>群组ID：</label>
          <a-input v-model:value="searchData.groupId" placeholder="请输入用户名" @pressEnter="onSearch" allow-clear/>
        </div>
        <div class="search-item" style="width: 190px;margin-left:20px">
          <label>群主ID：</label>
          <a-input v-model:value="searchData.groupOwnerId" placeholder="请输入群主ID" @pressEnter="onSearch" allow-clear/>
        </div>
        <div class="search-item" style="width: 210px;margin-left:20px">
          <label>群主昵称：</label>
          <a-input v-model:value="searchData.ownerName" placeholder="请输入群主昵称" @pressEnter="onSearch" allow-clear/>
        </div>
        <div class="search-item" style="width: 210px;margin-left:0px">
          <label>群组状态：</label>
          <a-select v-model:value="searchData.status" style="width: 150px;" placeholder="请选择" @change="handleChange">
            <a-select-option value="活跃">活跃</a-select-option>
            <a-select-option value="非活跃">非活跃</a-select-option>
          </a-select>
        </div>

        <div class="search-btn" >
          <a-button type="primary" @click="onSearch">查询</a-button>
          <a-button @click="onReset">重置</a-button>
        </div>
      </div>
      <div class="panel-table">
        <div class="panel-table-tool">
          <div class="tool-btn">
            <a-button @click="onExport()" type="primary" ghost>导出</a-button>
          </div>
        </div>
        <div class="panel-table-list">
          <!--这里是选择某项传过去的值-->
          <a-table :bordered="true" :data-source="tableData.data" :columns="tableData.columns"
                   :loading="tableData.loading" :pagination="false" :scroll="{x: 1200}"
                   :rowKey="(record) => {return record.groupId}"
                   >
            <template #bodyCell="{ text, record, index, column }">
              <template v-if="column.key === 'img'">
                <img style="width: 32px; height: 32px; border-radius: 50%;" :src="record.img" :alt="record.groupName"/>
              </template>
              <!-- 添加对群组状态列作特殊处理 -->
              <template v-if="column.key && column.key === 'status'">
                <a-tag :color="getStatusColor(record.status)">
                  {{record.status}}
                </a-tag>
              </template>
            </template>
          </a-table>
        </div>
        <div class="panel-table-pager">
          <a-pagination :current="pagerData.current" :pageSize="pagerData.pageSize" :total="pagerData.total" :show-total="total => '共' + total + '条'"
                        @showSizeChange="onPagerSizeChange" @change="onPagerChange" show-quick-jumper show-size-changer>
          </a-pagination>
        </div>
      </div>
    </div>

  </a-modal>
</template>

<script>
export default {
  components: {

  },
  props: {modalParam: {type: Object}},
  data() {
    return {
      pageData: {
        show: true,
        loading: false,
      },
      searchData: {
        groupName: null,//群名
        groupId: null,//群ID
        groupOwnerId: null,//群主id
        ownerName: null,//群主昵称
        range: [null, null], // 起始时间和终止时间的数组
        status:null, //群组活跃状态
      },
      tableData: {
        loading: false, selectedRowKeys: [], data: [],
        columns: [
          {title: "序号", key: "index", width: 65, align: "center", customRender: ({ index }) => {return index + 1}},
          {title: '群组名称', dataIndex: 'groupName', Width: 200, align: 'center', ellipsis: true},
          {title: '群组ID', dataIndex: 'groupId', minWidth: 50, align: 'center', ellipsis: true},
          {title: '头像', key: "img", minWidth: 20, align: 'center', ellipsis: true},
          {title: '群主ID', dataIndex: 'groupOwnerId', Width: 80, align: 'center', ellipsis: true},
          {title: '群主昵称', dataIndex: 'ownerName', minWidth: 50, align: 'center', ellipsis: true},
          {title: '创建时间', dataIndex: 'createTime', Width: 50, align: 'center', ellipsis: true},
          {title: '人数', dataIndex: 'memberCount', minWidth: 70, align: 'center', ellipsis: true},
          {title: '消息数', dataIndex: 'messagesCount', minWidth: 70, align: 'center', ellipsis: true},
          {title: '群组状态',key:'status',dataIndex: 'status', minWidth: 70, align: 'center', ellipsis: true},
        ]
      },
      pagerData: {
        current: 1, pageSize: 10, total: 0
      }

    }
  },
  mounted() {
    const range = this.modalParam.range;
    this.searchData.range = range;
    this.onSearch();
  },
  methods: {

    //关闭弹窗
    onClose(refresh) {
      this.$emit("close", {refresh: refresh});
    },
    //查询
    onSearch() {
      this.pagerData.current = 1;
      this.queryTableList();
    },
    //重置搜索条件
    onReset() {
      this.searchData.groupName = null;
      this.searchData.groupId = null;
      this.searchData.groupOwnerId = null;
      this.searchData.username = null;
       this.searchData.range = null;
      this.searchData.status = "";
      this.onSearch();
    },

    //获取表格数据
    queryTableList() {
      let params = {
        groupName: this.searchData.groupName,
        groupId: this.searchData.groupId,
        groupOwnerId: this.searchData.groupOwnerId,
        ownerName: this.searchData.ownerName,
        status: this.searchData.status,

        limit: this.pagerData.pageSize,
        page: this.pagerData.current,
        begin:null,
        end:null,
      }
      // 处理日期时间范围
      if (this.searchData.range) {
        params.begin = this.formatDate(this.searchData.range[0]) ;
        params.end = this.formatDate(this.searchData.range[1]) ;
      }
      // 过滤出非空参数
      params = Object.fromEntries(Object.entries(params).filter(([key, value]) => value !== undefined && value !== null));
      // 构建 URL 字符串
      let url = `${this.$Api.messageStatisticData.queryGroupDataDetail}?${new URLSearchParams(params).toString()}`;
      this.tableData.loading = true;
      this.$ajax.get(url).then(responses=>{
        console.log('responses',responses)
        if(responses.data.code == 200) {
          //设置表格数据
          this.tableData.data = responses.data.data;
          //设置分页数据
          this.pagerData.total = responses.data.count;
        }
      }).finally(() => {
        this.tableData.loading = false;
      })
    },
    //分页页码改变
    onPagerChange(current) {
      this.pagerData.current = current;
      this.queryTableList();
    },
    //分页每页数量改变
    onPagerSizeChange(current, size) {
      this.pagerData.current = 1;
      this.pagerData.pageSize = size;
      this.queryTableList();
    },
    onExport(){
      // 构建请求参数
      let params = {
        // 获取token from localStorage
        ticketNO:localStorage.getItem("ticketNO"),
        groupName: this.searchData.groupName,
        groupId: this.searchData.groupId,
        groupOwnerId: this.searchData.groupOwnerId,
        ownerName: this.searchData.ownerName,
        status: this.searchData.status,
        limit: this.pagerData.pageSize,
        page: this.pagerData.current,
        begin:null,
        end:null,

      }
      // 处理日期时间范围
      if (this.searchData.range) {
        params.begin = this.formatDate(this.searchData.range[0]) ;
        params.end = this.formatDate(this.searchData.range[1]) ;
      }
      // 过滤出非空参数
      params = Object.fromEntries(Object.entries(params).filter(([key, value]) => value !== undefined && value !== null));
      // 构建 URL 字符串
      let url = `${this.$Api.messageStatisticData.exportGroupDetailDataList}?${new URLSearchParams(params).toString()}`;
      window.open(
          url
      );
    },
    handleChange(){
      this.pagerData.current = 1;
      this.queryTableList();
    },
    // 格式化日期的辅助方法
    formatDate(dateString) {
      if (dateString) {
        const date = new Date(dateString);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
      } else {
        return null;
      }
    },
    getStatusColor(status) {
      // 根据群组状态返回对应的颜色
      return status === '活跃' ? 'green' : 'red';
    },

  }
}
</script>

<style scoped lang="less">
</style>
